<div class="container">
	<div class="row" ng-controller="Tasks">	
		<div class="col-md-10 col-md-offset-1">
			<div class="panel-group" id="accordion">
			  	<div class="panel panel-{{task.state==1?'success':'default'}}" ng-repeat="task in tasks" ng-controller="Task">
			    	<div class="panel-heading">
			      		<h4 class="panel-title">
			      			<a data-toggle="collapse" data-parent="#accordion" data-target="#{{task.id}}">{{task.description}}</a>
			      			<span class="caret"></span>
			      			<span ng-hide="task.deadline==null">Due on:</span>{{task.deadline|date:'medium'}}
			        		<input style="float: right;" type="checkbox" ng-model="confirmed" ng-change="statechange()"/>
			        		<span style="float: right;">{{confirmed?"Finished":"Not Yet"}}</span>
			      		</h4>
			    	</div>
			    	<div id="{{task.id}}" class="panel-collapse collapse">
			      		<div class="panel-body" ng-hide="task.state==1">
			      			<div class="row">
			      				<div class="col-md-6">
			      					<input class="form-control" ng-model="comments" placeholder="Type your new contributes">
			      				</div>
			      				<div class="col-md-3">
			      					<input class="form-control" ng-model="timespend" placeholder="how much time">
			      				</div>
			      				<!--<div class="col-md-3">
			      					<div class="input-group date form_datetime" data-date="2013-12-08T05:25:07Z" data-date-format="yyyy-mm-dd hh:mm" data-link-field="dtpinput1">
			      					    <input class="form-control" value="" placeholder="when finished"></input>
			      						<span class="input-group-addon">
			      							<span class="glyphicon glyphicon-th" ng-hide="true"></span>
			      						</span>
			      					</div>
			      					<input type="hidden" id="dtpinput1"/><br/>
			      				</div>-->
			      				<div class="col-md-2">
			      					<select class="form-control" ng-model="iditem">
			      						<option ng-repeat="item in items" value="{{item.iditems}}">{{item.name}}</option>
			      					</select>
			      				</div>
			      				<div class="col-md-1">
			      					<button class="btn btn-info" ng-click="addtasksand();">done</button>
			      				</div>
			      			</div>			        		
			      		</div>
			      		<div class="panel-body" ng-repeat="sand in sands">
			      			<div class="row">
			      				<div class="col-md-3">
			      					{{sand.datetime}}
			      				</div>
			      				<div class="col-md-3">
			      					You spent:{{sand.time}} hours
			      				</div>
			      				<div class="col-md-3">
			      					{{sand.comments}}
			      				</div>
			      				<!--<div class="col-md-3">
			      					{{sand.item}}
			      				</div>-->
			      			</div>
			      		</div>
			    	</div>
			  	</div>
			</div>  	
		</div>
		
		<div class="col-md-1">
			<button class="btn btn-success" data-toggle="modal" data-target="#newTask">New Task</button>
		</div>		
		<div class="modal fade" id="newTask" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  	<div class="modal-dialog">
		    	<div class="modal-content">
		      		<div class="modal-header">
		        		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        		<h4 class="modal-title" id="myModalLabel">Modal title</h4>
		      		</div>
		      		<div class="modal-body container">
		        		<div class="row">
		        			<div class="col-md-8 col-md-offset-2">
		        				<div class="form-group">
		        					<input class="form-control" ng-model="description" placeholder="Type your description of new task"></input>
		        				</div>
		        			</div>
		        		</div>
		        		<div class="row">
		        			<label for="" class="control-label col-md-3 col-md-offset-2"> Deadline Date:</label>
		        			<div class="form-group col-md-5">
		        				<div class="row">
		        					<div>
		        						<input type="number" class="form-control" ng-model="year" name="year" placeholder="year">
		        					</div>
		        				</div>
		        				<div class="row">
		        					<div>
		        						<input type="number" class="form-control input-sm" ng-model="month" name="month" placeholder="month">
		        					</div>
		        				</div>
		        				<div class="row">
		        					<div>
		        						<input type="number" class="form-control input-sm" ng-model="date" name="date" placeholder="date">
		        					</div>
		        				</div>
		        			</div>
		        		</div>
		      		</div>
		      		<div class="modal-footer">
		        		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		        		<button type="button" class="btn btn-primary" ng-click="addTask();">Save changes</button>
		      		</div>
		    	</div><!-- /.modal-content -->
		  	</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
	</div>
</div>